<template>
    <el-card class="box-card" shadow="never">
        <div class="title">任务指标设定</div>
        <el-divider class="line" border-style="double" />
        <el-form ref="step3Form" :model="step3Data" :rules="step3Rules" :disabled="step3Diabled">
            <el-form-item label="任务描述">
                <el-input
                    v-model="step3Data.remark"
                    type="textarea"
                    style="width: 580px"
                    placeholder="请输入任务描述"
                    maxlength="50"
                    show-word-limit
                    :rows="3" />
            </el-form-item>
            <!-- 电话销售 -->
            <template v-if="task_type == 1">
                <el-form-item
                    label="电话拨打"
                    prop="call_deploy.type"
                    class-name="create-form-item el-form-item"
                    @change="callType">
                    <el-radio-group v-model="step3Data.call_deploy.type" disabled>
                        <el-radio :label="1" value="1">网络电话外呼</el-radio>
                        <el-radio :label="2" value="2">传统电话外呼</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="外呼结果" :prop="step3Data.call_deploy.type == 1 ? 'call_deploy.call_type' : ''">
                    <template v-if="step3Data.call_deploy.type == 1">
                        <el-select
                            v-model="step3Data.call_deploy.call_type"
                            class="mr10"
                            placeholder="已接通"
                            style="width: 140px">
                            <el-option label="已接通" :value="1" />
                            <el-option label="未接通" :value="2" />
                            <el-option label="挂机" :value="3" />
                            <el-option label="空号" :value="4" />
                        </el-select>
                        <div v-show="step3Data.call_deploy.call_type == 1" class="call_result">
                            通话时长超过
                            <el-input
                                v-model="step3Data.call_deploy.result_connect_num"
                                class="mar_w"
                                type="number"
                                step="1" />
                            分钟后，设置任务完成
                        </div>
                        <div v-show="step3Data.call_deploy.call_type == 2" class="call_result">
                            拨打次数超过
                            <el-input
                                v-model="step3Data.call_deploy.result_unconnected_num"
                                class="mar_w"
                                type="number"
                                step="1" />
                            次后，设置任务完成
                        </div>
                        <div v-show="step3Data.call_deploy.call_type == 3" class="call_result">
                            拨打次数超过
                            <el-input
                                v-model="step3Data.call_deploy.result_refuse_num"
                                class="mar_w"
                                type="number"
                                step="1" />
                            分钟后，设置任务完成
                        </div>
                        <div v-show="step3Data.call_deploy.call_type == 4" class="call_result">自动设置任务完成</div>
                    </template>
                    <template v-else> 默认使用外呼结果：已接通、未接通、挂机、空号 </template>
                </el-form-item>
                <el-form-item :label="`${isClues ? '线索' : '客户'}评级`">
                    <el-switch v-model="step3Data.grade_switch" class="mr10" :active-value="1" :inactive-value="2" />
                    {{ `开启后，员工完成任务前需给${isClues ? '线索' : '客户'}评级后才能完成。` }}
                    <div v-if="step3Data.grade_switch == 1">{{ custList }}</div>
                </el-form-item>
                <el-form-item label="上传凭证">
                    <el-switch
                        v-model="step3Data.call_deploy.cert_switch"
                        class="mr10"
                        :active-value="1"
                        :inactive-value="2" />{{
                        `开启后，员工完成任务前需给${isClues ? '线索' : '客户'}上传凭证后才能完成。`
                    }}
                    <div>
                        设置图片凭证数量
                        <el-input
                            v-model="step3Data.call_deploy.cert_num"
                            :disabled="step3Data.call_deploy.cert_switch == 2"
                            class="mar_w"
                            type="number"
                            step="1"
                            min="1"
                            max="9" />个
                    </div>
                </el-form-item>
            </template>
            <!-- 客户拜访 -->
            <template v-if="task_type == 2">
                <el-form-item label="拜访计划" prop="visit_deploy.switch">
                    <el-switch
                        v-model="step3Data.visit_deploy.switch"
                        class="mr10"
                        :active-value="1"
                        :inactive-value="2"
                        @change="visitPlan" />
                    开启后，员工拜访前需要录入拜访计划。<br />
                    <el-checkbox
                        v-model="step3Data.visit_deploy.reset_switch"
                        :disabled="step3Data.visit_deploy.switch == 2"
                        :true-label="1"
                        :false-label="2" />
                    允许员工修改拜访地点
                </el-form-item>
                <el-form-item label="拜访签到" prop="visit_deploy.signin_switch">
                    <el-switch
                        v-model="step3Data.visit_deploy.signin_switch"
                        class="mr10"
                        :active-value="1"
                        :inactive-value="2"
                        @change="visitSign" />
                    开启后，员工完成任务前需要执行签到动作。
                </el-form-item>
                <el-form-item label="签到限制" :prop="step3Data.visit_deploy.signin_switch == 1 ? 'checkList' : ''">
                    <el-checkbox-group
                        v-model="step3Data.checkList"
                        :disabled="step3Data.visit_deploy.signin_switch == 2"
                        @change="changeCheckbox">
                        <el-checkbox class="check_dom" label="signin_range_switch">
                            签到范围半径为
                            <el-input
                                v-model="step3Data.visit_deploy.signin_range_distance"
                                :disabled="step3Data.visit_deploy.signin_switch == 2"
                                class="mar_w"
                                type="number"
                                step="1"
                                min="0" />
                            米
                        </el-checkbox>
                        <el-checkbox label="signin_cert_switch">
                            签到照片数量
                            <el-input
                                v-model="step3Data.visit_deploy.signin_cert_num"
                                :disabled="step3Data.visit_deploy.signin_switch == 2"
                                class="mar_w"
                                type="number"
                                step="1"
                                max="9"
                                min="1" />
                            张
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item :label="`${isClues ? '线索' : '客户'}评级`">
                    <el-switch v-model="step3Data.grade_switch" class="mr10" :active-value="1" :inactive-value="2" />
                    {{ `开启后，员工完成任务前需给${isClues ? '线索' : '客户'}评级后才能完成。` }}
                    <div v-if="step3Data.grade_switch == 1">{{ custList }}</div>
                </el-form-item>
                <el-form-item label="上传凭证" prop="visit_deploy.cert_switch">
                    <el-switch
                        v-model="step3Data.visit_deploy.cert_switch"
                        class="mr10"
                        :active-value="1"
                        :inactive-value="2"
                        disabled />
                    {{ `开启后，员工完成任务前需给${isClues ? '线索' : '客户'}上传凭证后才能完成。` }}
                    <div>
                        设置图片凭证数量
                        <el-input
                            v-model="step3Data.visit_deploy.cert_num"
                            :disabled="step3Data.visit_deploy.cert_switch == 2"
                            class="mar_w"
                            type="number"
                            step="1"
                            min="1"
                            max="9" />
                        张
                    </div>
                </el-form-item>
                <el-form-item label="跟进记录" prop="visit_deploy.follow_switch">
                    <el-switch
                        v-model="step3Data.visit_deploy.follow_switch"
                        class="mr10"
                        :active-value="1"
                        :inactive-value="2"
                        disabled />
                    开启后，员工完成任务前需给添加跟进记录才能完成。
                    <div>
                        设置跟进记录数量
                        <el-input
                            v-model="step3Data.visit_deploy.follow_num"
                            :disabled="step3Data.visit_deploy.follow_switch == 2"
                            class="mar_w"
                            type="number"
                            step="1"
                            min="1" />
                        个
                    </div>
                </el-form-item>
            </template>
            <!-- 企微招募 -->
            <template v-if="task_type == 3">
                <el-form-item label="任务执行">
                    <el-switch v-model="step3Data.join_deploy.type" :active-value="1" :inactive-value="2" disabled />
                    加用户个人微信/企业微信
                </el-form-item>
                <el-form-item :label="`${isClues ? '线索' : '客户'}评级`">
                    <el-switch v-model="step3Data.grade_switch" class="mr10" :active-value="1" :inactive-value="2" />{{
                        `开启后，员工完成任务前需给${isClues ? '线索' : '客户'}评级后才能完成。`
                    }}
                    <div v-if="step3Data.grade_switch == 1">{{ custList }}</div>
                </el-form-item>
            </template>
            <el-form-item label="任务状态">
                <div>完成以上事项任务标记完成。</div>
                <el-checkbox v-model="step3Data.auto_switch" :true-label="1" :false-label="2" /> 允许员工手动更改状态
            </el-form-item>
        </el-form>
    </el-card>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, toRefs, watch } from 'vue';
import router from '@/router';
import { ElMessage } from 'element-plus';
import { getSetionId, numFormat } from '@/utils/utils';
import { getCustormerList } from '@/api/customerCenter/groupManage';
import { getClueLevelList } from '@/api/employe/employeetasks/taskmanage';
const props = defineProps(['isClues']);
const { isClues } = toRefs(props); // 是否是线索
const step3Form = ref(null);
const task_type = ref(1);
const step3Diabled = ref(false);
const step3 = ref(true);
const custList = ref('');
const validCheck = (rule: any, value: any, callback: any) => {
    if (value.length <= 0) {
        callback(new Error('签到限制至少勾选一种'));
    } else {
        callback();
    }
};
const step3Data = reactive({
    checkList: [],
    remark: '',
    call_deploy: {
        type: 2,
        call_type: 1,
        result_connect_num: 5,
        result_unconnected_num: 2,
        result_refuse_num: 3,
        cert_switch: 1,
        cert_num: 5
    },
    visit_deploy: {
        switch: 1,
        reset_switch: 1,
        signin_switch: 1,
        signin_range_switch: 1,
        signin_range_distance: 500,
        signin_cert_switch: 1,
        signin_cert_num: 9,
        follow_switch: 1,
        follow_num: 5,
        cert_switch: 1,
        cert_num: 5
    },
    join_deploy: {
        type: 1
    },
    grade_switch: 1,
    auto_switch: 1
});
const step3Rules = reactive({
    checkList: { required: true, validator: validCheck, trigger: ['blur', 'change'] },
    call_deploy: {
        type: { required: true, message: '电话拨打至少选择一个', trigger: 'change' },
        call_type: { required: true, message: '外呼结果至少选择一个', trigger: 'change' }
    },
    visit_deploy: {
        switch: { required: true, message: '拜访计划不能为空', trigger: 'change' },
        signin_switch: { required: true, message: '拜访签到不能为空', trigger: 'change' },
        cert_switch: { required: true, message: '上传凭证不能为空', trigger: 'change' },
        follow_switch: { required: true, message: '跟进记录不能为空', trigger: 'change' }
    }
});
const callType = (val: number) => {
    if (val == 1) {
        step3Data.call_deploy.result_connect_num = 5;
        step3Data.call_deploy.result_unconnected_num = 5;
        step3Data.call_deploy.result_refuse_num = 5;
    }
};
// 拜访计划
const visitPlan = (val: number) => {
    if (val == 2) step3Data.visit_deploy.signin_switch = 2;
    step3Data.visit_deploy.reset_switch = 2;
};
// 拜访签到
const visitSign = (val: number) => {
    if (step3Data.visit_deploy.switch == 2) {
        step3Data.visit_deploy.signin_switch = 2;
    }
    if (val == 2) {
        step3Form.value.validateField('checkList');
        step3Data.checkList = [];
    }
};
// 多选
const changeCheckbox = (val: any) => {
    if (val.length == 1) {
        if (val[0] == 'signin_range_switch') {
            step3Data.visit_deploy.signin_range_switch = 1;
            step3Data.visit_deploy.signin_cert_switch = 2;
        } else {
            step3Data.visit_deploy.signin_range_switch = 2;
            step3Data.visit_deploy.signin_cert_switch = 1;
        }
    } else if (val.length == 2) {
        step3Data.visit_deploy.signin_range_switch = 1;
        step3Data.visit_deploy.signin_cert_switch = 1;
    } else {
        step3Data.visit_deploy.signin_range_switch = 2;
        step3Data.visit_deploy.signin_cert_switch = 2;
    }
};
const save = () => {
    return step3Form.value.validate(valid => {
        step3.value = valid;
        if (!valid) return;
    });
};
// 客户等级
const getCustList = () => {
    custList.value = '';
    getCustormerList({ page_size: 999 }).then((res: any) => {
        custList.value = `默认使用客户等级：` + getSetionId('name', res)?.join('、');
    });
};
// 线索等级
const getCulesList = () => {
    custList.value = '';
    getClueLevelList({ status: 1, page_size: 999 }).then((res: any) => {
        custList.value = `默认使用线索等级：` + getSetionId('name', res.data)?.join('、');
    });
};
onMounted(() => {
    task_type.value = router.currentRoute.value.query?.val;
});
defineExpose({
    step3Diabled,
    step3Data,
    step3,
    save
});
watch(
    () => props.isClues,
    val => {
        // console.log(val, '===等级');
        if (val) getCulesList();
        // 线索
        else getCustList(); // 客户
    },
    { immediate: true }
);
</script>
<style lang="scss" scoped>
.box-card {
    border-bottom: none;
    min-height: calc(100vh - 294px);
}

:deep(.el-form-item) {
    margin-bottom: 8px;
}

:deep(.create-form-item) {
    margin-bottom: 0;
}

.mr10 {
    margin-right: 10px;
}

.mar_w {
    width: 140px;
    margin: 0 5px;
}

.title {
    font-size: 16px;
    font-family: PingFangSC-Medium, 'PingFang SC';
    font-weight: 500;
    color: #585858;
    line-height: 22px;
}

.call_result {
    display: inline-block;
}

.check_dom {
    display: block;
    margin-bottom: 15px;
}

.line {
    margin: 20px 0;
}
</style>
